<template>
	<view>
		<u-navbar :is-back="false" title="" :border-bottom="false">
			<view class="slot-wrap">
				<view class="back" @click="navTo('back')">
					<view class="iconfont iconfanhui" :style="{'padding-top': paddingTop}"></view>
					<view class="text">返回</view>
				</view>
				<view class="set">设置中心</view>
			</view>
		</u-navbar>
		<view class="u-skeleton">
			<view class="content">
				<view class="item" @click="navTo('/pages/setting/phone')">
					<view class="left">安全中心</view>
					<view class="right">
						<view>手机号管理</view>
						<view class="iconfont icongengduo"></view>
					</view>
				</view>
				<view class="item">
					<view class="left">清除缓存</view>
					<view class="right">
						<view></view>
						<view class="iconfont icongengduo"></view>
					</view>
				</view>
				<view class="item" @click="navTo('/pages/setting/problem-feedback')">
					<view class="left">问题反馈</view>
					<view class="right">
						<view></view>
						<view class="iconfont icongengduo"></view>
					</view>
				</view>
				<view class="item" @click="navTo('/pages/setting/about')">
					<view class="left">关于安瑞</view>
					<view class="right">
						<view>版本{{ version }}</view>
						<view class="iconfont icongengduo"></view>
					</view>
				</view>
				<view class="item" @click="navTo('loginOut')" v-show="isLogin">
					<view class="left">退出登录</view>
				</view>
			</view>
		</view>
		<u-skeleton :loading="loading" el-color="#eee" bg-color="#fff" :animation="true"></u-skeleton>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: false, // 是否显示骨架屏组件
				paddingTop: '2rpx',
				isLogin: false,
				version: '1.0.0'
			}
		},
		onLoad() {
			if(uni.getSystemInfoSync().platform != "ios") {
				this.paddingTop = '8rpx'
			}
			// #ifdef APP-PLUS
			console.log(plus.runtime.version)
			this.version = plus.runtime.version
			// #endif
			setTimeout(() => {
				this.loading = false
			}, 1000)
			const token = uni.getStorageSync('token')
			if (token) {
				this.isLogin = true
			}
		},
		methods: {
			// back() {
			// 	uni.navigateBack()
			// },
			navTo(data) {
				let self=this;
				if (data === 'back') {
					uni.navigateBack()
				} else if (data === '/pages/setting/phone') {
					uni.navigateTo({url: data})
				} else if (data === '/pages/setting/problem-feedback') {
					uni.navigateTo({url: data})
				} else if (data === '/pages/setting/about') {
					uni.navigateTo({url: data})
				} else if (data === 'loginOut') {
					// #ifdef APP-PLUS
					this.$IM.Im.getLoginStatus({}, ret => {
						console.log('登录状态',ret)
						if(ret.loginStatus!="2"){
							this.$IM.Im.logout({}, ret => {
								console.log('IM退出登录',ret)
							});
						}
					});
					// #endif
					// uni.clearStorageSync()
					uni.removeStorageSync('user')
					uni.removeStorageSync('token')
					uni.removeStorageSync('isLogin')
					uni.removeStorageSync('isRefresh')
					uni.navigateBack()
				}
				
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f9f9f9;
	}
	.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;
		padding: 0 30rpx;
		.back {
			display: flex;
			font-size: 32rpx;
			.iconfanhui {
				font-weight: bold;
				font-size: 36rpx;
				padding-top: 8rpx;
			}
		}
		.set {
			display: flex;
			margin-left: 26%;
			font-weight: bold;
			font-size: 32rpx;
		}
	}
	.content {
		
		.item {
			background-color: #fff;
			display: flex;
			font-size: 28rpx;
			color: #1c222a;
			padding: 0 30rpx;
			height: 110rpx;
			align-items: center;
			.left {
				font-weight: 800;
				font-size: 28rpx;
			}
			.right {
				display: flex;
				align-items: center;
				margin-left: auto;
				color: #b4b4b4;
				font-size: 28rpx;
			}
			&:first-child {
				margin: 30rpx 0;
			}
			&:active {
				background-color: #f9f9f9;
			}
			&:nth-child(2),&:nth-child(3),&:nth-child(4) {
				border-bottom: 1px solid #f9f9f9;
			}
			&:last-child {
				margin: 30rpx 0;
				justify-content: center;
				color: #ff5a57;
			}
		}
	}
</style>
